<template>
	<view class="container tc">
		<image class="logo" src="../../static/login/logo.png"></image>
		<text class="title">悟空淘助手</text>
		<!-- 输入框 -->
		<input class="phone" type="text" placeholder="请输入手机号/用户名" v-model="username">
		<input class="code" type="password" placeholder="请输入密码" v-model="password">
		<!-- 登录按钮 -->
		<view class="btn" @click="userLogin">登录</view>
		<view class="tip" @click="toPath('reg')">还没有账号？<text>去注册</text></view>
		<view class="forget" @click="toPath('forget')">忘记密码</view>
		<van-dialog class="custom-button" use-slot title="图片验证码" :show="svgShow" @close="close" @confirm="submit">
			<input type="text" placeholder="请输入图形验证码" v-model="svgCode">
			<image :src="svgUrl"></image>
		</van-dialog>
	</view>
</template>

<script>
	import {
		tip
	} from '@/utils/tip'
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				username: '',
				password: '',
				captchaId: '',
				svgShow: false,
				svgUrl: '',
				svgCode: '',
				count: 0
			}
		},
		methods: {
			...mapMutations(['login']),
			toPath(val) {
				uni.navigateTo({
					url: `/pages/common/${val}`
				})
			},
			// 校验
			valid() {
				if (!this.username || !this.password) {
					uni.showToast({
						title: '请输入账号或密码',
						icon: 'none'
					})
					return false
				} else {
					return true
				}
			},
			userLogin(type) {
				if (this.count >= 3) {
					this.getSvg()
					return
				}
				let params = {
					username: this.username,
					password: this.password,
					captchaId: this.captchaId,
					verifyCode: this.svgCode
				}
				if (!this.valid()) return
				this.$service.common.userLogin(params).then((res) => {
					this.login(res) // 存token
					this.$store.dispatch('getUserInfo')
					this.$store.dispatch('getUserPerm')
					uni.switchTab({
						url: '/pages/index/index'
					})
				}).catch((err) => {
					if (err === '验证码不正确~') {
						this.getSvg()
					} else {
						this.count++
						uni.showToast({
							title: err,
							icon: 'none'
						})
					}
				})
			},
			submit() {
				let params = {
					username: this.username,
					password: this.password,
					captchaId: this.captchaId,
					verifyCode: this.svgCode
				}
				if (!this.valid()) return
				this.$service.common.userLogin(params).then((res) => {
					this.login(res) // 存token
					this.$store.dispatch('getUserInfo')
					this.$store.dispatch('getUserPerm')
					uni.switchTab({
						url: '/pages/index/index'
					})
				}).catch((err) => {
					this.count++
					uni.showToast({
						title: err,
						icon: 'none'
					})
					this.svgShow = false
				})
				this.svgCode = ''
			},
			// 获取图形
			getSvg() {
				let params = {
					type: 'base64'
				}
				this.$service.common.getSvg(params).then((res) => {
					this.svgShow = true
					this.svgUrl = res.data
					this.captchaId = res.captchaId
				}).catch((err) => {

				})
			},
			close() {
				this.svgShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		widht: 100vw;
		height: 100vh;
		background-color: white;
		padding-top: 142rpx;

		.logo {
			width: 240rpx;
			height: 240rpx;
			display: block;
			margin: 0 auto;
		}

		text {
			display: block;
		}

		.title {
			font-size: 48rpx;
			color: $main-color;
			font-weight: bold;
			// margin-top: 38rpx;
		}

		input {
			width: 500rpx;
			margin: 0 auto;
			border-bottom: 2rpx solid #F2F2F2;
			font-size: 28rpx;
			text-align: left;
			padding-bottom: 12rpx;
		}

		.phone {
			margin-top: 220rpx;
		}

		.code {
			margin-top: 52rpx;
		}

		.btn {
			width: 342rpx;
			height: 72rpx;
			line-height: 72rpx;
			border-radius: 42rpx;
			text-align: center;
			font-size: 28rpx;
			color: white;
			background-color: $main-color;
			margin: 0 auto;
			margin-top: 94rpx;
		}

		.tip {
			margin-top: 40rpx;
			color: #666666;
			font-size: 28rpx;
			text {
				display: inline;
				color: #169AFF;
			}
		}

		.forget {
			font-size: 28rpx;
			margin-top: 34rpx;
			color: #14A1FF;
		}

		/deep/ .custom-button {
			input {
				width: 70%;
				margin: 0 auto;
				margin-top: 30rpx;
			}

			image {
				margin-top: 20rpx;
				display: block;
				width: 180rpx;
				height: 90rpx;
				margin: 30rpx auto;
			}
		}
	}
</style>
